<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>植物列表 - 植物保护管理系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/plants.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <img src="images/logo.png" alt="logo">
                <h1>植物保护管理系统</h1>
            </div>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="plants.html">植物列表</a></li>
                <li><a href="index.html#protection">保护措施</a></li>
                <li><a href="index.html#statistics">数据统计</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="plants-section">
            <h2>植物列表</h2>
            <div class="search-bar">
                <input type="text" placeholder="搜索植物...">
                <button>搜索</button>
            </div>
            <div class="plant-grid">
                <div class="plant-list">
                    <div class="plant-card">
                        <img src="images/cotton.jpg" alt="棉花">
                        <h3>棉花</h3>
                        <p>养护等级：中等</p>
                        <p>类型：经济作物</p>
                        <button onclick="window.location.href='detail.html?id=20'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/wheat.jpg" alt="小麦">
                        <h3>小麦</h3>
                        <p>养护等级：中等</p>
                        <p>类型：粮食作物</p>
                        <button onclick="window.location.href='detail.html?id=17'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/soybean.jpg" alt="大豆">
                        <h3>大豆</h3>
                        <p>养护等级：中等</p>
                        <p>类型：粮食作物</p>
                        <button onclick="window.location.href='detail.html?id=18'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/corn.jpg" alt="玉米">
                        <h3>玉米</h3>
                        <p>养护等级：中等</p>
                        <p>类型：粮食作物</p>
                        <button onclick="window.location.href='detail.html?id=19'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/plant1.jpg" alt="蝴蝶兰">
                        <h3>蝴蝶兰</h3>
                        <p>养护等级：中等</p>
                        <p>类型：室内观赏</p>
                        <button onclick="window.location.href='detail.html?id=1'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/plant2.jpg" alt="金银花">
                        <h3>金银花</h3>
                        <p>养护等级：简单</p>
                        <p>类型：药用植物</p>
                        <button onclick="window.location.href='detail.html?id=2'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/plant3.jpg" alt="绿萝">
                        <h3>绿萝</h3>
                        <p>养护等级：简单</p>
                        <p>类型：室内观赏</p>
                        <button onclick="window.location.href='detail.html?id=3'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/plant4.jpg" alt="仙人掌">
                        <h3>仙人掌</h3>
                        <p>养护等级：简单</p>
                        <p>类型：多肉植物</p>
                        <button onclick="window.location.href='detail.html?id=4'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/plant5.jpg" alt="君子兰">
                        <h3>君子兰</h3>
                        <p>养护等级：中等</p>
                        <p>类型：室内观赏</p>
                        <button onclick="window.location.href='detail.html?id=5'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/plant6.jpg" alt="芦荟">
                        <h3>芦荟</h3>
                        <p>养护等级：简单</p>
                        <p>类型：多肉植物</p>
                        <button onclick="window.location.href='detail.html?id=6'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/plant7.jpg" alt="文竹">
                        <h3>文竹</h3>
                        <p>养护等级：中等</p>
                        <p>类型：室内观赏</p>
                        <button onclick="window.location.href='detail.html?id=7'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/plant8.jpg" alt="发财树">
                        <h3>发财树</h3>
                        <p>养护等级：简单</p>
                        <p>类型：室内观赏</p>
                        <button onclick="window.location.href='detail.html?id=8'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/plant9.jpg" alt="白掌">
                        <h3>白掌</h3>
                        <p>养护等级：中等</p>
                        <p>类型：室内观赏</p>
                        <button onclick="window.location.href='detail.html?id=9'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/plant10.jpg" alt="龟背竹">
                        <h3>龟背竹</h3>
                        <p>养护等级：中等</p>
                        <p>类型：室内观赏</p>
                        <button onclick="window.location.href='detail.html?id=10'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/plant11.jpg" alt="薰衣草">
                        <h3>薰衣草</h3>
                        <p>养护等级：高级</p>
                        <p>类型：药用香草</p>
                        <button onclick="window.location.href='detail.html?id=11'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/plant12.jpg" alt="虎尾兰">
                        <h3>虎尾兰</h3>
                        <p>养护等级：初级</p>
                        <p>类型：室内净化</p>
                        <button onclick="window.location.href='detail.html?id=12'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/plant13.jpg" alt="茉莉花">
                        <h3>茉莉花</h3>
                        <p>养护等级：高级</p>
                        <p>类型：观赏香花</p>
                        <button onclick="window.location.href='detail.html?id=13'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/plant14.jpg" alt="富贵竹">
                        <h3>富贵竹</h3>
                        <p>养护等级：初级</p>
                        <p>类型：水培植物</p>
                        <button onclick="window.location.href='detail.html?id=14'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/plant15.jpg" alt="玫瑰">
                        <h3>玫瑰</h3>
                        <p>养护等级：高级</p>
                        <p>类型：观赏花卉</p>
                        <button onclick="window.location.href='detail.html?id=15'" class="detail-btn">查看详情</button>
                    </div>
                    <div class="plant-card">
                        <img src="images/plant16.jpg" alt="多肉植物">
                        <h3>多肉植物</h3>
                        <p>养护等级：初级</p>
                        <p>类型：观赏植物</p>
                        <button onclick="window.location.href='detail.html?id=16'" class="detail-btn">查看详情</button>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 植物保护管理系统</p>
    </footer>

    <script src="js/plants.js"></script>
</body>
</html> 